<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 via-white to-blue-50 relative overflow-hidden">

    <LoadingScreen :show="isPostLoginLoading" />

    <!-- 背景装饰 -->
    <div class="fixed inset-0 pointer-events-none">
      <div class="absolute top-20 left-20 w-96 h-96 bg-gradient-to-r from-blue-100/40 to-indigo-100/40 rounded-full filter blur-3xl animate-pulse"></div>
      <div class="absolute bottom-20 right-20 w-80 h-80 bg-gradient-to-r from-purple-100/40 to-pink-100/40 rounded-full filter blur-3xl animate-pulse delay-1000"></div>
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-to-r from-indigo-100/20 to-cyan-100/20 rounded-full filter blur-3xl animate-spin-slow"></div>
    </div>

    <!-- 导航栏 -->
    <nav class="relative z-10 w-full px-6 py-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <AppLogo size="small" />
          <NuxtLink to="/" class="inline-flex items-center text-blue-600 hover:text-blue-700 transition-colors duration-200">
            <i class="bi bi-arrow-left mr-2 text-lg"></i>
            <span class="text-sm font-medium">返回首页</span>
          </NuxtLink>
        </div>
        <NuxtLink to="/auth/register" class="text-blue-600 hover:text-blue-700 transition-colors duration-200">
          <span class="text-sm font-medium">没有账号？立即注册</span>
        </NuxtLink>
      </div>
    </nav>

    <!-- 登录表单区域 -->
    <div class="relative z-10 flex items-center justify-center min-h-[calc(100vh-80px)] px-6">
      <div class="w-full max-w-md">
        <!-- Logo和标题 -->
        <div class="text-center mb-8">
          <AppLogo size="medium" />
          <h1 class="text-3xl font-bold text-gray-800 mt-6 mb-2">欢迎回来</h1>
          <p class="text-gray-600">登录您的账户，继续您的购物之旅</p>
        </div>

        <!-- 登录表单 -->
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 shadow-xl">
          <form @submit.prevent="handleLogin" class="space-y-6">
            <!-- 账号 -->
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 mb-2">账号</label>
              <div class="relative">
                <input 
                  id="email"
                  v-model="loginForm.email" 
                  type="text" 
                  required
                  placeholder="请输入邮箱/用户名/手机号"
                  class="w-full px-4 py-3 pl-12 bg-white border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all duration-300 focus:bg-white"
                >
                <i class="bi bi-person absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
              </div>
              <p class="mt-2 text-xs text-gray-500">支持邮箱、用户名或手机号登录</p>
            </div>

            <!-- 密码 -->
            <div>
              <label for="password" class="block text-sm font-medium text-gray-700 mb-2">密码</label>
              <div class="relative">
                <input 
                  id="password"
                  v-model="loginForm.password" 
                  :type="showPassword ? 'text' : 'password'"
                  required
                  minlength="6"
                  placeholder="请输入您的密码"
                  class="w-full px-4 py-3 pl-12 pr-12 bg-white border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all duration-300 focus:bg-white"
                >
                <i class="bi bi-lock absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                <button 
                  type="button"
                  @click="showPassword = !showPassword"
                  class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-600 transition-colors duration-200">
                  <i :class="showPassword ? 'bi bi-eye-slash' : 'bi bi-eye'" class="text-lg"></i>
                </button>
              </div>
            </div>

            <!-- 记住我和忘记密码 -->
            <div class="flex items-center justify-between">
              <label class="flex items-center cursor-pointer group">
                <input type="checkbox" v-model="rememberMe" class="sr-only">
                <div class="relative">
                  <div :class="[
                    'w-4 h-4 rounded border-2 transition-all duration-200 flex items-center justify-center',
                    rememberMe 
                      ? 'bg-blue-500 border-blue-500 shadow-md shadow-blue-500/30' 
                      : 'border-gray-400 group-hover:border-blue-500 bg-white'
                  ]">
                    <i v-if="rememberMe" class="bi bi-check text-white text-xs leading-none"></i>
                  </div>
                </div>
                <span class="ml-3 text-sm text-gray-600 group-hover:text-gray-800 transition-colors duration-200 select-none">记住我</span>
              </label>
              <a href="#" class="text-sm text-blue-600 hover:text-blue-700 transition-colors duration-200">忘记密码？</a>
            </div>

            <!-- 登录按钮 -->
            <button 
              type="submit"
              :disabled="loading || isPostLoginLoading"
              class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 disabled:from-gray-400 disabled:to-gray-400 text-white py-3 px-6 rounded-lg font-medium transition-all duration-300 shadow-lg shadow-blue-500/20 hover:shadow-blue-500/40 disabled:cursor-not-allowed flex items-center justify-center gap-2">
              <div v-if="loading || isPostLoginLoading" class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
              <i v-else class="bi bi-box-arrow-in-right text-lg"></i>
              {{ getLoginButtonText() }}
            </button>
          </form>

          <!-- 分割线 -->
          <div class="relative my-6">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-300"></div>
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-2 bg-white text-gray-500">或者</span>
            </div>
          </div>

          <!-- 注册链接 -->
          <div class="text-center">
            <p class="text-gray-600 text-sm">
              还没有账号？
              <NuxtLink to="/auth/register" class="text-blue-600 hover:text-blue-700 font-medium transition-colors duration-200">
                立即注册
              </NuxtLink>
            </p>
          </div>
        </div>

        <!-- 额外信息 -->
        <div class="text-center mt-8">
          <p class="text-gray-500 text-xs">
            登录即表示您同意我们的
            <a href="#" class="text-blue-600 hover:text-blue-700">服务条款</a>
            和
            <a href="#" class="text-blue-600 hover:text-blue-700">隐私政策</a>
          </p>
        </div>
      </div>
    </div>

    <!-- 成功/错误提示 -->
    <div v-if="message.show" 
         :class="[
           'fixed top-6 right-6 z-50 px-6 py-4 rounded-lg shadow-lg transition-all duration-300',
           message.type === 'success' 
             ? 'bg-green-100 border border-green-300 text-green-700' 
             : 'bg-red-100 border border-red-300 text-red-700'
         ]">
      <div class="flex items-center gap-3">
        <i :class="message.type === 'success' ? 'bi bi-check-circle' : 'bi bi-exclamation-circle'" class="text-lg"></i>
        <span>{{ message.text }}</span>
        <button @click="message.show = false" class="ml-2 hover:opacity-75">
          <i class="bi bi-x text-lg"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { api } from '../../utils/api'
import type { UserLoginInput } from '../../utils/api'
import { useUserStore } from '../../stores/user'
import { useAddressStore } from '../../stores/address'
import { useLocation } from '../../composables/useLocation'

// 使用Pinia stores
const userStore = useUserStore()
const addressStore = useAddressStore()

// 使用IP定位功能
const { fetchLocation } = useLocation()

// 响应式数据
const loading = ref(false)
const isPostLoginLoading = ref(false)
const showPassword = ref(false)
const rememberMe = ref(false)

// 登录表单
const loginForm = reactive<UserLoginInput>({
  email: '',
  password: ''
})

// 消息提示
const message = ref({
  show: false,
  type: 'success' as 'success' | 'error',
  text: ''
})

// 计算登录按钮文本
const getLoginButtonText = () => {
  if (loading.value) return '登录中...'
  if (isPostLoginLoading.value) return '正在初始化...'
  return '立即登录'
}

// 显示消息提示
const showMessage = (type: 'success' | 'error', text: string) => {
  message.value = { show: true, type, text }
  setTimeout(() => {
    message.value.show = false
  }, 5000)
}

// 初始化用户数据
const initializeUserData = async () => {
  const tasks = [
    {
      name: '初始化用户信息',
      action: async () => {
        // 用户信息已经在setAuth中设置，这里可以获取更多用户相关信息
        // 如果需要额外的用户信息接口，可以在这里调用
        await new Promise(resolve => setTimeout(resolve, 500)) // 模拟API调用
      }
    },
    {
      name: '初始化收货地址',
      action: async () => {
        try {
          await addressStore.initializeAddresses()
        } catch (error) {
          console.error('初始化地址数据失败:', error)
          // 地址初始化失败不影响登录流程
        }
      }
    },
    {
      name: '获取位置信息',
      action: async () => {
        try {
          // 获取用户当前位置信息
          await fetchLocation(true)
        } catch (error) {
          console.error('获取位置信息失败:', error)
          // 位置信息获取失败不影响登录流程
        }
      }
    },
    {
      name: '同步用户配置',
      action: async () => {
        try {
          // 这里可以添加同步用户配置的逻辑
          // 例如：用户偏好设置、购物车数据等
          await new Promise(resolve => setTimeout(resolve, 300)) // 模拟API调用
        } catch (error) {
          console.error('同步用户配置失败:', error)
        }
      }
    }
  ]

  // 依次执行各个初始化任务
  for (const task of tasks) {
    await task.action()
  }
}

// 处理登录
const handleLogin = async () => {
  try {
    loading.value = true
    const response = await api.auth.login(loginForm)
    
    if (response.data) {
      // 保存用户信息和token
      userStore.setAuth(response.data.token, response.data.user)
      
      showMessage('success', '登录成功！正在初始化用户数据...')
      
      // 开始登录后的数据初始化
      isPostLoginLoading.value = true
      loading.value = false
      
      try {
        await initializeUserData()
        
        // 所有初始化完成后跳转
        await new Promise(resolve => setTimeout(resolve, 500)) // 短暂延迟
        
        // 跳转到首页
        window.location.href = '/'
        
      } catch (error) {
        console.error('用户数据初始化失败:', error)
        isPostLoginLoading.value = false
        showMessage('error', '数据初始化失败，但登录成功，正在跳转...')
        
        // 即使初始化失败也跳转，用户可以在需要时手动刷新
        setTimeout(() => {
          window.location.href = '/'
        }, 2000)
      }
    }
  } catch (error: any) {
    console.error('登录失败:', error)
    loading.value = false
    isPostLoginLoading.value = false
    showMessage('error', error.message || '登录失败，请检查账号和密码')
  }
}
</script>

<style scoped>
/* 玻璃卡片效果 */
.glass-card-dark {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

/* 自定义动画 */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

/* 输入框聚焦效果 */
input:focus {
  outline: none;
}

/* 复选框动画 */
input[type="checkbox"] + div {
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .glass-card-dark {
    margin: 1rem;
    padding: 2rem;
  }
}
</style> 